<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>

	<link rel="stylesheet" type="text/css" href="./css/index3.css"/>
	<link rel="stylesheet" type="text/css" href="./css/styles.css"/>
	<link href="./css/bootstrap-datetimepicker.css" rel="stylesheet">
	<link href="./css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" media="screen" href="./css/bootstrap.min.css" />
	<!--时间css end-->
	<link href="./css/animate.min.css" rel="stylesheet">
	<link href="./css/prettify-1.0.css" rel="stylesheet">
	<link href="./css/base.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./css/default.css">
	<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<!--时间js start-->
	<script src="./js/moment-with-locales.js"></script>
	<script src="./js/bootstrap-datetimepicker.js"></script>

	<script type="text/javascript" src="./js/Popt.js"></script>
	<script type="text/javascript" src="./js/city.json.js"></script>
	<script type="text/javascript" src="./js/citySet.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/styless.css" />
	<script type="text/javascript" src="./js/jquery.SuperSlide.2.1.3.js"></script>
	<link rel="stylesheet" href="./css/swiper.min.css">


	<script src="./js/swiper.min.js"></script>

	<link rel="stylesheet" href="./css/stylesss.css">
	<style type="text/css">
		._citys { background-color: #101010; width: 450px; display: inline-block;  padding: 5px; position: relative; }
		._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
		._citys0 { color: #DDDDDD; width: 95%; height: 34px; line-height: 34px; display: inline-block;  padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
		._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
		._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
		._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
		._citys1 a:hover { color: #fff; background-color: #05920a; }
		.AreaS { background-color: #05920a !important; color: #fff !important; }
	</style>
</head>
<body>
<div class="titles">
	<p>张家口途乐客车租赁</p>
	<div class="title1">
		<a href="myself.html">个人中心</a>
		<a onclick="tuichu()">退出登录</a>
	</div>
</div>


<div id="slideBox" class="slideBox" style="width: 100%;">
	<div class="hd">
		<ul class="bannerstatename">



		</ul>
	</div>
	<div class="bd" style="width: 100%;">
		<ul class="bannerstate">



		</ul>
	</div>



</div>



<div class="Modeltitle">
	<p>车型推荐</p>
</div>

<div class="Model">




</div>




<div class="Modeltitle">
	<p>司机推荐</p>
</div>

<div class="driver">



</div>



<div class="main">
	<div class="title">实时动态</div><div class="w-imgText" id="imgText">
	<div class="swiperBox">
		<ul class="swiper-wrapper">


		</ul></div>
	<div class="igt_page"></div>
</div><div class="igt_page_text"><ul class="clearfix"></ul></div>

	<script type="text/javascript">
		$(function(){
			var per_name = localStorage.getItem("user_name_n");
			var user_id = localStorage.getItem("user_id");
			console.log(per_name);
			console.log(user_id);

		})
	</script>
</div>



<div class="dibu">

</div>



<div class="w3ls-contact">

	<!-- form starts here -->
	<form action="#" method="post">
		<div class="agile-field-txt">
			<label style="">
				出发 :</label>
			<div class="mr_agilemain">
				<div class="left-wthree">
					<input type="text" name="task_starting" placeholder="请选择" autocomplete="off" readonly="true" id="city" required="">
					<label class="bot_w3">
						出发地点</label>
				</div>
				<div class="left-wthree">
					<div class='input-group date' >
						<input type="text" name="task_departure" id='datetimepicker3' placeholder=" " required="">
					</div>
					<label class="bot_w3">
						出发时间</label>
				</div>
			</div>
		</div>


		<div class="agile-field-txt">
			<label>
				返程 :</label>
			<div class="mr_agilemain">
				<div class="left-wthree">
					<input type="text" name="task_end" placeholder="请选择" autocomplete="off" readonly="true" id="citys" required="">
					<label class="bot_w3">
						返程地点</label>
				</div>
				<div class="left-wthree">
					<div class='input-group date' >
						<input type="text" name="task_return" id='datetimepickera' placeholder=" " required="">
					</div>
					<label class="bot_w3">
						返程时间</label>
				</div>
			</div>
		</div>


		<div class="agile-field-txt">
			<label>
				关于 :</label>
			<div class="mr_agilemain">
				<div class="left-wthree">
					<input type="text" name="task_quantity" placeholder=" " required="">
					<label class="bot_w3">
						用车人数</label>
				</div>
				<div class="left-wthree">
					<input type="text" id="task_driver_number" placeholder=" " required="">
					<label class="bot_w3">
						联系电话</label>
				</div>
			</div>
		</div>



		<div class="agile-field-txt">
			<label>
				备注</label>
			<textarea name="task_remarks" placeholder="请输入详细内容" required=""></textarea>
		</div>
		<div style="text-align: center;" onclick="fb()">
			<input  type="submit" value="发布">
		</div>

	</form>
</div>

<script type="text/javascript">
    function fb () {
        var user_id=localStorage.getItem("user_id1");
        var task_starting = $("input[name='task_starting']").val();
        var task_departure = $("input[name='task_departure']").val();
        var task_end = $("input[name='task_end']").val();
        var task_return = $("input[name='task_return']").val();
        var task_quantity = $("input[name='task_quantity']").val();
        var task_driver_number = $("input[id='task_driver_number']").val();
        var task_remarks = $("textarea[name='task_remarks']").val();
        alert(user_id+"---"+task_starting+"---"+task_departure+"---"+task_end+"---"+task_return+"---"+task_quantity+"---"+task_driver_number+"---"+task_remarks);
        $.ajax({
            type:"post",
            url:"/inserttask",
            data : JSON.stringify({
                task_user_id:user_id,
                task_starting:task_starting,
                task_departure:task_departure,
                task_end:task_end,
                task_return:task_return,
                task_quantity:task_quantity,
                task_user_number:task_driver_number,
                task_remarks:task_remarks
            }),
            contentType : "application/json;charset=UTF-8",
            success:function(data) {
                console.log(data.data);
                // if(data.data>0) {
                //     alert("发布任务成功")
                //     window.location.href="myself.html";
                //     return;
                // }
                if(data.status==200) {
                    alert("发布任务成功")
                    window.location.href="myself.html";
                    return;
                }
                if(data.status==500) {
                    alert("添加错误");
                    window.location.href="index.html";
                    return;
                }
                if(data.status==null) {
                    alert("修改异常");
                    window.location.href="index.html";
                    return;
                }
                // if(data.status==20) {
                //     layer.alert("重复添加", {icon: 6},function () {
                //         window.location.href="index.html";
                //     });
                //     return;
                // }
            }
        });

    }
</script>
<script type="text/javascript">
	//退出登录
	function tuichu() {
		localStorage.clear();
		window.location.href="login.html";
	}
</script>
<script type="text/javascript">
	$(function () {
		$('#datetimepicker3').datetimepicker({
			locale: 'zh-cn',
			viewMode: 'days',
			format: 'YYYY-MM-DD'
		});
	});
	$(function () {
		$('#datetimepickera').datetimepicker({
			locale: 'zh-cn',
			viewMode: 'days',
			format: 'YYYY-MM-DD'
		});
	});
</script>
<script type="text/javascript">
	$("#city").click(function (e) {
		SelCity(this,e);
	});
	$("s").click(function (e) {
		SelCity(document.getElementById("city"),e);
	});
</script>

<script type="text/javascript">
	$("#citys").click(function (e) {
		SelCity(this,e);
	});
	$("s").click(function (e) {
		SelCity(document.getElementById("citys"),e);
	});
</script>

<script type="text/javascript">

	$(function(){


		//banner图片渲染
		$.ajax({
			type:"POST",
			url:"/bannerliststate",
			datatype:'json',
			success:function(data){
				if(data.status==401){
					alert("熔断开启，系统异常");
					window.location.href="login.html";
					return;


				}
				var  lists = data.data;
				console.log(data);
				var html = "";

				for (var i = 0; i < 3; i++){

					html += '<li style="background-color: rgb(183, 159, 255); width: 100%;"><img style="width: 100%;"  src="/imgshows?picName=' + lists[i].banner_image + '" /></li>';


					$('.bannerstate').html(html);
					// html += '<li><span>' + lists[i].banner_name + '</span><div class="dot"><div class="liner"></div></div></li>';
					// $('.bannerstatename').html(html);
				}
				jQuery(".slideBox").slide({
					mainCell: ".bd ul",
					effect: "fold",
					trigger: "click",
					autoPlay: true,
					mouseOverStop: false,
					startFun:function(i,c){
						$('.bd ul li').removeClass('active').eq(i).addClass('active');
					}
				});


			}
		});

		//banner名字渲染
		$.ajax({
			type:"POST",
			url:"/bannerliststate",
			datatype:'json',
			success:function(data){
				if(data.status==401){
					alert("熔断开启，系统异常");
					window.location.href="login.html";
					return;


				}
				var  lists = data.data;
				console.log(data);
				var html = "";

				for (var i = 0; i < 3; i++){


					html += '<li><span>' + lists[i].banner_name + '</span><div class="dot"><div class="liner"></div></div></li>';
					$('.bannerstatename').html(html);
				}
				jQuery(".slideBox").slide({
					mainCell: ".bd ul",
					effect: "fold",
					trigger: "click",
					autoPlay: true,
					mouseOverStop: false,
					startFun:function(i,c){
						$('.bd ul li').removeClass('active').eq(i).addClass('active');
					}
				});


			}
		});

		//客车渲染
		$.ajax({
			type:"POST",
			url:"/busstateall",
			datatype:'json',
			success:function(data){
				if(data.status==401){
					alert("熔断开启，系统异常");
					window.location.href="login.html";
					return;


				}
				var  lists = data.data;
				console.log(data);
				var html = "";

				for (var i = 0; i < 8; i++){



					html += '<figure>';
					html += '<img src="/imgshows?picName=' + lists[i].bus_photo + '">';
					html += '<div class="Model1">';
					html += '<div class="Model2">';
					html += '<figcaption style="font-size: 17px;">' + lists[i].bus_name + '</figcaption>';
					html += '<figcaption style="color: #999999;">可乘坐人数：' + lists[i].bus_seat + '</figcaption>';
					html += ' </div><a style="color: crimson;">￥' + lists[i].bus_price + '/天</a>';
					html += '</div></figure>';

					$('.Model').html(html);

				}


			}
		});


        //司机列表
		$.ajax({
			type:"POST",
			url:"/driverStatelist",
			datatype:'json',
			success:function(data){
				if(data.status==401){
					alert("熔断开启，系统异常");
					window.location.href="login.html";
					return;


				}
				var  lists = data.data;
				console.log(data);
				var html = "";

				for (var i = 0; i < 4; i++){

					html += '<figure>';
					html += '<img src="/imgshows?picName=' + lists[i].driver_personal + '">';
					html += '<figcaption style="font-size: 17px;">' + lists[i].driver_name + '</figcaption>';
					html += '<figcaption style="color: #999999;">' + lists[i].driver_remarks + '</figcaption>';

					html += '</figure>';

					$('.driver').html(html);

				}


			}
		});

		//新闻渲染
		$.ajax({
			type:"POST",
			url:"/journalismstate",
			datatype:'json',
			success:function(data){
				if(data.status==401){
					alert("熔断开启，系统异常");
					window.location.href="login.html";
					return;


				}
				var  lists = data.data;
				console.log(data);
				var html = "";

				for (var i = 0; i < 3; i++){
					// html += '<div class="title">实时动态</div><div class="w-imgText" id="imgText">';
					// html += '<div class="swiperBox">';
					// html += '<ul class="swiper-wrapper">';
					html += '<li class="swiper-slide" data-title="' + lists[i].journalism_title + '">';
					html += '<div class="item"><div class="imTB"> <div class="img">';
					html += '<img src="/imgshows?picName=' + lists[i].journalism_content1 + '"/></div>';
					html += '<div class="textB"><div class="bg_x"></div><div class="text_x">';
					html += '<div class="tt_h">' + lists[i].journalism_title + '</div>';
					html += '<p>' + lists[i].journalism_content2 + '</p>';
					html += '<div class="btn">查看更多</div></div></div></div><a href="#"></a></div></li>';
					// html += '</ul></div><div class="igt_page"></div>';
					// html += '</div><div class="igt_page_text"><ul class="clearfix"></ul></div>';
					$('.swiper-wrapper').html(html);


				}

				var imgTextId=$('#imgText');
				var swiperId=imgTextId.find('.swiperBox');
				var pagediv=imgTextId.find('.igt_page');
				var igtli=imgTextId.find('li');
				var igtliW=100*1.0/igtli.length + '%';
				var titles=[];
				var _html = '';
				igtli.each(function (index) {
					var title=$(this).attr('data-title');
					if(index===0){
						_html += '<li class="igt_li on" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
					}else{
						_html += '<li class="igt_li" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
					}
				});
				imgTextId.siblings('.igt_page_text').find('ul').append(_html);
				var swiper1 = new Swiper(swiperId, {
					effect : 'slide',
					autoplay : {
						delay:8000,//滚动速度
						disableOnInteraction: false,
					},
					pagination: {
						el: pagediv,
						type: 'custom',
						renderCustom: function (swiper, current, total) {
							return '<span class="on">0' + current + '</span><span>/</span><span>0' + total + '</span>';
						}
					},
					on:{
						slideChange: function(){
							var index = this.activeIndex;
							imgTextId.siblings('.igt_page_text').find('li').eq(index).addClass('on').find('.adore').addClass('bg_main');
							imgTextId.siblings('.igt_page_text').find('li').eq(index).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
						}
					}
				})
				imgTextId.siblings('.igt_page_text').on('click','li',function(){
					if (!$(this).hasClass('on')){
						var thisI = $(this).index();
						$(this).addClass('on').find('.adore').addClass('bg_main');
						$(this).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
						swiper1.slideTo(thisI, 1000, false);
					}

				});


			}
		});

	})
</script>


</body>
</html>
